<template>
  <div class="pr-20">
    <el-form class="edit-form" :model="formData" ref="formRef" :rules="rules" label-width="100px">
      <div>
        <yu-cron @change="changeCron" v-model:value="formData.logicConfig" />
      </div>
      <el-form-item label="cron表达式" prop="logicConfig">
        <el-input v-model="formData.logicConfig" placeholder="请输入cron表达式"> </el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button-group>
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="confirmBtn">确 定</el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script setup>
  import {ref, reactive} from 'vue';
  const formData = reactive({
    // 表单数据
    logicConfig: '* * * * * ? *', // cron表达式
  });
  const props = defineProps({
    isShow: {type: Boolean, default: false},
  });
  const emits = defineEmits(['update:value', 'update:isShow']);
  const changeCron = val => {
    if (typeof val !== 'string') return false;
    formData.logicConfig = val;
  };
  const onCancel = () => {
    emits('update:isShow', false);
  };
  const confirmBtn = () => {
    emits('update:value', formData.logicConfig);
    emits('update:isShow', false);
  };
</script>
